<template>
  <div>
    <div class="steps">
      <el-steps :active="activeIndex" finish-status="success" simple>
        <el-step title="询报价信息" />
        <el-step title="定标信息" />
      </el-steps>
    </div>
    <el-card class="basic-info">
      <span slot="header">定标商品信息</span>
      <BasicTable
        ref="multipleTable"
        :show-select-col="false"
        :show-pagination="false"
        :show-ActionCol="false"
        :show-total="false"
        :rowHeight="43"
        :tableMaxHeight="600"
        :loading="tableInfo.loading"
        :data-source="tableInfo.list"
        :columns="tableInfo.columns"
        showSummary
        :summaryMethod="summaryMethod"
      />
      <div class="user-info">
        <span>定标人：{{ userInfo.targetUser }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>定标人公司：{{ userInfo.targetCompany }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>定标时间：{{userInfo.targetDate}}</span>
      </div>
      <el-row type="flex" justify="center">
        <el-button size="mini" type="primary" @click="handleBackHome">返回</el-button>
        <el-button size="mini" type="primary" @click="handleBackQuotePage">上一步</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import BasicTable from '@/pages/sourcing/components/BasicList';
import { queryCalibrationInfoService } from '@/api/sourcing/purchaseDetail'
import {
  TABLE_COLUMNS,
  TABLE_COLUMNS2,
  TABLE_COLUMNS3_VIEW,
  TABLE_COLUMNS3_VIEW_PROPS
} from './constants';
import { summaryMethod } from '../../utils';

export default {
  name: 'OrderCalibrationView',
  components: {
    BasicTable,
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: [],
        selection: [],
        loading: false
      },
      activeIndex: 1,
      queryParams: {
        isEdit: '',
        pageType: '',
        sourcingBillId: '',
        isDemand: false,
      },
      userInfo: {
        targetCompany: '',
        targetDate: '',
        targetUser: '',
      },
    };
  },

  created () {
    const { sourcingBillId } = this.$route.query
    if (sourcingBillId) {
      this.queryParams = {
        sourcingBillId,
        isEdit: false,
        pageType: 2,
        isDemand: false,
      }
      sessionStorage.setItem('detailInfo', JSON.stringify(this.queryParams));
    } else if (sessionStorage.detailInfo) {
      this.queryParams = JSON.parse(sessionStorage.detailInfo);
    }
    this.queryCalibrationInfo()
  },

  methods: {
    summaryMethod,
    // 初始化表头
    initTableColumns () {
      this.tableInfo.columns = _.cloneDeep(TABLE_COLUMNS)
    },
    // 初始化表格数据
    initTableData (skuList) {
      this.tableInfo.list = [];
      this.initTableColumns();
      skuList.forEach((ele, oneIndex) => {
        const curRow = {
          ...ele
        };
        ele.supplierList.forEach((item, index) => {
          this.pushItem(oneIndex, curRow, item, index);
        });
        this.tableInfo.list.push(curRow);
      });
      this.tableInfo.columns = this.tableInfo.columns.concat(TABLE_COLUMNS2);
    },
    pushItem (oneIndex, curRow, item) {
      // 将行内动态列的信息，平铺到行
      const tag = item.supplierId;
      TABLE_COLUMNS3_VIEW_PROPS.forEach(name => {
        curRow[`${name}_${tag}`] = item[name];
      });
      // 表头，遍历第1行的动态列时，才追加到表头
      if (oneIndex === 0) {
        const children = _.cloneDeep(TABLE_COLUMNS3_VIEW)
        children.forEach(i => {
          i.prop = `${i.prop}_${tag}`
        })
        this.tableInfo.columns.push({
          label: item.supplierName,
          prop: item.supplierId,
          children
        });
      }
    },
    // 获取定标详情
    async queryCalibrationInfo () {
      const params = {
        isCompleteWinBill: 1,
        sourcingBillId: this.queryParams.sourcingBillId,
      };
      const res = await queryCalibrationInfoService(params, state => { this.tableInfo.loading = state })
      if (res) {
        const { skuList, targetCompany, targetDate, targetUser } = res.data.winBiddingDto;
        this.userInfo = {
          targetCompany,
          targetDate,
          targetUser,
        }
        this.initTableData(skuList);
      }
    },
    // 重新报价
    handleBackQuotePage () {
      if (this.isDemand()) {
        this.$router.push({ name: 'demandPurchaseDetail' });
      } else {
        this.$router.push({ name: 'purchaseDetail' });
      }
    },
    // 返回
    handleBackHome () {
      if (this.isDemand()) {
        this.$router.push({ name: 'demandOrder' });
      } else {
        this.$router.push({ name: 'order' });
      }
    },
    // 是否为需求管理
    isDemand () {
      return this.queryParams.isDemand;
    },
  },
};
</script>
<style lang="less" scoped>
.user-info {
  font-weight: bold;
  margin: 10px 0;
}
</style>
